<template>
  <component
    :is="componentName"
    ref="componentRef"
    @handleClick="handleClick"
    @setTitle="setTitle"
    :dataSource="props.dataSource"
    :hasClick="props.hasClick"
    :columns="props.columns"
    :mode="props.mode"
    v-bind="$attrs"
  >
    <template #header>
      <slot name="header">
        <div class="vc-calendar-header-title">
          <slot name="title">
            {{ title }}
          </slot>
        </div>
        <div class="vc-calendar-header-btns">
          <slot name="btns">
            <span @click="prev">
              <left-outlined />
            </span>
            <span @click="handleToday">{{ defaultCurrentTitle }}</span>
            <span @click="next">
              <right-outlined />
            </span>
          </slot>
        </div>
      </slot>
    </template>
    <template #day="{ data }">
      <slot name="day" :data="data">{{
        props.type !== 'year' ? data.day : data.month + '月'
      }}</slot>
    </template>
    <template #schedule="{ data }">
      <slot name="schedule" :data="data"></slot>
    </template>
  </component>
</template>
<script>
  export default {
    name: 'VcCalendar',
  };
</script>
<script setup>
  import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
  import Month from './Month.vue'; // 月历
  import Week from './Week.vue'; // 周历
  import Year from './Year.vue'; // 年历
  const props = defineProps({
    type: {
      type: String,
      default: 'week',
      validate: (v) => {
        const list = ['week', 'month', 'year'];
        return list.includes(v);
      },
    },
    hasClick: {
      type: Boolean,
      default: true,
    },
    mode: {
      type: String,
      default: 'single',
      validate: (v) => {
        const list = ['single', 'multiple'];
        return list.includes(v);
      },
    },
    dataSource: {
      type: Array,
      default: () => [],
    },
    columns: {
      type: Array,
      default: () => ['一', '二', '三', '四', '五', '六', '日'],
    },
    currentTitle: {
      type: String,
      default: '',
    },
  });
  const emit = defineEmits(['prev', 'handleToDay', 'next', 'handleClick']);
  const handleClick = (data, emitName) => {
    emit(emitName, data);
  };
  const components = {
    week: Week,
    month: Month,
    year: Year,
  };
  const componentRef = ref();
  const componentName = ref();
  watchEffect(() => {
    if (props.type) componentName.value = markRaw(components[props.type]);
  });
  const title = ref();
  const setTitle = (e) => {
    title.value = e;
  };
  const defaultCurrentTitle = computed(() => {
    let currentTitle = '';
    if (props.type === 'week') {
      currentTitle = '本周';
    }
    if (props.type === 'month') {
      currentTitle = '本月';
    }
    if (props.type === 'year') {
      currentTitle = '本年';
    }
    return props.currentTitle || currentTitle;
  });
  const prev = () => componentRef.value.handlePrev();
  const handleToday = () => componentRef.value.handleToday();
  const next = () => componentRef.value.handleNext();
  defineExpose({
    prev,
    handleToday,
    next,
  });
</script>
<style lang="less" scoped>
  @import './style.less';
</style>
